<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer" :label-width="80">
      <el-form-item label="练习账号: ">
        <!-- <el-input v-model="queryParams.studentID" placeholder="请选择学员"  @keyup.enter="onSearch"  style="width: 180px;"/> -->
        <el-select
          filterable
          v-model="queryParams.studentID"
          placeholder="请选择练习账号" 
          style="width: 180px;"
          clearable
        >
          <el-option
            v-for="item in studentList"
            :key="item.id"
            :label="item.name+item.phone+item.account"
            :value="item.id"
          >
              <span>{{ item.name }}-{{ item.phone }}</span>
              <span style="float: right;color: #c7c7c7;">{{ item.account }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="持仓日期: ">
          <el-date-picker
              style="width: 180px;"
              v-model="queryParams.positionDate"
              type="date"
              placeholder="请选择持仓日期"
              size="small"
              value-format="YYYY-MM-DD"
          />
      </el-form-item>
      <!-- <el-form-item label="标的合约: ">
          <el-input v-model="queryParams.instrumentCode" placeholder="请输入品种合约"  @keyup.enter="onSearch"  style="width: 180px;"/>
      </el-form-item> -->
      <el-form-item label="合约代码: ">
          <el-input v-model="queryParams.varietyCode" placeholder="请输入合约代码"  @keyup.enter="onSearch"  style="width: 180px;"/>
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="openAddModal"><el-icon><Plus /></el-icon>新增 </el-button>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div >
      <ColumnSetting v-model:columnList="columnList" />
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :data="tableData"
        row-key="id"
        :height="tableHeight"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
      >
        <el-table-column type="index" label="序号" width="80" fixed/>
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='dataSource'">
                <div v-if="scope.row.dataSource==1">系统数据</div>
                <div v-else-if="scope.row.dataSource==0">外部推送</div>
              </template>
              <template v-else-if="item.prop=='lots'">
                <template v-if="scope.row.buyPosition"> {{ scope.row.buyPosition }}</template>
                <template v-else> {{ scope.row.sellPosition }}</template>
              </template>
              <template v-else-if="item.prop=='openAveragePrice'">
                <template v-if="scope.row.buyAveragePrice"> {{ scope.row.buyAveragePrice }}</template>
                <template v-else> {{ scope.row.sellAveragePrice }}</template>
              </template>
              <template v-else>
                  <template v-if="item.prop=='remark'">
                      <el-tooltip class="box-item" effect="dark" :content="scope.row[item.prop]"
                      :teleported="true" popper-class="pc">
                          <div class="multiRowText" style="width: 160px;margin: unset;">{{ scope.row[item.prop] }}</div>
                      </el-tooltip>
                  </template>
                  <template v-else>
                      {{ scope.row[item.prop] }}
                  </template>
              </template>
            </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
             <template #default="scope">
              <el-button  size="small" link type="success"  @click="editRow(scope.row.id)" ><el-icon><Edit /></el-icon> 修改</el-button>
              <el-button  size="small" link type="danger" @click="deleteRow(scope.row.id)" ><el-icon><Delete /></el-icon> 删除</el-button>
            </template>
          </el-table-column> -->
        </template>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
    </div>
  </div>
</template>
<script>
import { selectByPage, deleteItem } from '@/api/oss/positionManage.js'
import { getAll } from '@/api/oss/student.js'
import { mapState } from 'vuex'
import { ElLoading } from 'element-plus'
export default {
    components:{
    },
    data() {
        return {
            tableTotal: 0,
            tableLoading: false,
            tableData: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 20,
                instrumentCode:'',
                varietyCode:'',
                studentID:'',
                offsetFlag:'',
                positionDate:'',
            },
            columnList:[
                // {prop:'studentName',label:'学员名称',sortable:false,sort:1,hide:false,fixed:true,width:150},
                // {prop:'studentPhone',label:'学员手机号',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'studentAccount',label:'练习账号',sortable:false,sort:1,hide:false,fixed:true,width:130},
                {prop:'positionDate',label:'持仓日期',sortable:false,sort:2,hide:false,fixed:false,width:130},
                {prop:'varietyCode',label:'合约代码',sortable:false,sort:2,hide:false,fixed:false,width:130},
                {prop:'lots',label:'手数',sortable:false,sort:8,hide:false,fixed:false,width:60},
                {prop:'openAveragePrice',label:'开仓均价',sortable:false,sort:9,hide:false,fixed:false,width:100},
                {prop:'availableAmount',label:'持仓市值',sortable:false,sort:13,hide:false,fixed:false,width:130},
                {prop:'floatingProfitLoss',label:'浮动盈亏',sortable:false,sort:14,hide:false,fixed:false,width:130},


                // {prop:'positionDate',label:'持仓日期',sortable:false,sort:2,hide:false,fixed:false,width:130},
                // {prop:'instrumentCode',label:'标的合约',sortable:false,sort:4,hide:false,fixed:false,width:150},
                // {prop:'optionType',label:'期权类型',sortable:false,sort:6,hide:false,fixed:false,width:100},
                // {prop:'strikePrice',label:'执行价格',sortable:false,sort:7,hide:false,fixed:false,width:150},
                // {prop:'buyPosition',label:'买持仓',sortable:false,sort:8,hide:false,fixed:false,width:60},
                // {prop:'buyAveragePrice',label:'买均价',sortable:false,sort:9,hide:false,fixed:false,width:100},
                // {prop:'sellPosition',label:'卖持仓',sortable:false,sort:10,hide:false,fixed:false,width:60},
                // {prop:'sellAveragePrice',label:'卖均价',sortable:false,sort:11,hide:false,fixed:false,width:100},
                // {prop:'yesterdaySettlementPrice',label:'昨日结算价',sortable:false,sort:12,hide:false,fixed:false,width:150},
                // {prop:'todaySettlementPrice',label:'今日结算价',sortable:false,sort:13,hide:false,fixed:false,width:150},
                // {prop:'tradeCode',label:'交易编号',sortable:false,sort:14,hide:false,fixed:false,width:180},
                // {prop:'availableAmount',label:'持仓市值',sortable:false,sort:13,hide:false,fixed:false,width:130},
                // {prop:'floatingProfitLoss',label:'浮动盈亏',sortable:false,sort:14,hide:false,fixed:false,width:130},
                // {prop:'tradeMargin',label:'交易保证金',sortable:false,sort:15,hide:false,fixed:false,width:150},
                // {prop:'dataSource',label:'数据来源',sortable:false,sort:15,hide:false,fixed:false,width:100},
                {prop:'action',label:'操作',sortable:false,sort:16,hide:false,fixed:'right',width:200},
            ],
            tableHeight:(window.innerHeight - 380) + 'px',
            // 学员列表
            studentList:[],
        }
    },
    created() {
        // 列按照sort升序
        this.columnList = this.columnList.sort((a,b)=>a.sort-b.sort)
        this.selectByPage()
    },
    computed:{
        ...mapState(['amplify'])
    },
    mounted(){
        this.$nextTick(()=>{
            this.countTableHeight()
            // 获取所有学员信息
            getAll({}).then(res=>{
              if (res.code == 1) {
                  this.studentList = res.data
              }
            })
        })
    },
    methods: {
     
      deleteRow(id){

          this.$confirm("请确认是否删除 ?", "警告  ! ! !", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          }).then(() => {
              deleteItem({id:id}).then(res => {
                  if (res.code == 1) {
                  this.$message.success(res.message)
                  // 重新获取数据
                  this.onSearch()
                  } else {
                  this.$message.error(res.message)
                  }
              })
          })
      },
      // 打开新增弹窗事件
      openAddModal() {
          this.$refs.addOrUpdateRef.openModal(null)
      },
      editRow(id){
          this.$refs.addOrUpdateRef.openModal(id)
      },
      // 搜索事件
      onSearch() {
          this.queryParams.pageNo = 1
          this.selectByPage()
      },
      // 分页查询事件
      selectByPage() {
          this.tableLoading = true
          selectByPage(this.queryParams).then((res) => {
              this.tableLoading = false
              if (res.code === 1) {
                  this.tableData = res.data.records
                  this.tableTotal = res.data.total
              }
          }).catch(() => {
              this.tableLoading = false
          })
      },
      // 表格高度
      countTableHeight(){
        let tableHeight = (window.innerHeight - 380) + 'px'
        // 计算搜索区域
        var searchContainerList =  document.getElementsByClassName("searchContainer")
        if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                  let searchContainerHeight = searchContainerList[0].offsetHeight
                  // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                  let staticHeight = 60+38+30+15
                  if (this.amplify == true) {
                      // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                      tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                  } else {
                      tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                  }
                  this.tableHeight = tableHeight
              }
      },
    },
    watch: {
        amplify(newValue,oldValue) {
            this.countTableHeight()
        },
    },
}
</script>
<style lang="css" scoped>
  .multiRowText {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: auto;
  }
  :deep(.el-scrollbar) {
      text-align: left;
  }
</style>